<template>
  <el-dialog
    title="添加档案文件"
    :visible.sync="dialogVisibleAdd"
    :before-close="closedDialog"
  >
    <el-form :model="form" ref="ruleForm" :rules="rules">
      <el-form-item
        label="档案名称"
        prop="archive_name"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.archive_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="档案类别"
        prop="archive_category"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.archive_category" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="颁布日期"
        prop="archive_date"
        :label-width="formLabelWidth"
      >
        <el-date-picker
          v-model="form.archive_date"
          type="date"
          value-format="timestamp"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="备注"
        prop="archive_tips"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.archive_tips" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上传文件" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          :headers="headers"
          :action="uploadApi"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :limit="1"
          accept=".doc,.docx,.xls,.xlsx,.jpg,.png,.zip"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            文件不超过 50mb，格式为 .doc,.docx,.xls,.xlsx,.jpg,.png,.zip
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closedDialog">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        archive_name: '',
        archive_category: '',
        archive_date: new Date().getTime(),
        archive_tips: '',
        archive_file_path: ''
      },
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      },
      fileList: [],
      formLabelWidth: '120px',
      rules: {
        archive_name: [
          { required: true, message: '请输入档案名称', trigger: 'blur' }
        ],
        archive_category: [
          { required: true, message: '请输入档案类别', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    uploadApi() {
      return this.$http.defaults.baseURL + '/archives/upload'
    }
  },
  methods: {
    closedDialog() {
      this.$emit('addDialogClosed')
      // this.$parent.$data.dialogVisibleAdd = false
      this.fileList = []
      this.$refs.ruleForm.resetFields()
    },
    async submitDialog() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const { data } = await this.$http.post('archives', this.form)
          if (data.meta.status === 201) {
            // 添加成功后，关闭对话框，更新 users 页码表格数据
            this.$message.success(data.meta.msg)
            this.$emit('addDialogClosed')
            this.$emit('addSuccess')
            this.fileList = []
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error(data.meta.msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    },
    handleSuccess(res) {
      const { data, meta } = res
      if (meta.status === 200) {
        this.form.archive_file_path = data.filePath
      }
    },
    handleRemove(file, fileList) {
      this.form.archive_file_path = ''
    },
    handleExceed(files, fileList) {
      this.$message.warning('一个档案下限制选择 1 个文件')
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style></style>
